<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->

      <view class="top-title">{{ currOrgName }}</view>

      <view id="chartBox" style="width: 100%; height: 500rpx"></view>

      <view class="list-wrap">
        <view class="title">
          <view>各时间段情况表</view>
          <u-line class="u-line" color="#999"></u-line>
        </view>
        <view v-if="list.length" class="list">
          <view class="list-item" v-for="item of list" :key="item.orgUuid">
            <view class="list-item-content">
              <view class="left">
                <view class="name">{{ item.cycleName }}</view>
                <view>
                  <text style="margin-right: 8rpx">案件数</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.caseCount || 0 }}
                  </text>

                  <text style="margin-right: 8rpx">案值(万元)</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.caseValueCount }}
                  </text>

                  <text style="margin-right: 8rpx">卷烟数</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.cigaCount }}
                  </text>

                  <text style="margin-right: 8rpx">同期</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.cigaCountTqCount || 0 }}
                  </text>
                  <text style="margin-right: 8rpx">同比</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    <u-icon
                      v-if="item.cigaCountTb >= 0"
                      name="arrow-upward"
                      color="red"
                    ></u-icon>
                    <u-icon v-else name="arrow-downward" color="green"></u-icon>
                    {{ `${item.cigaCountTb}%` }}
                  </text>
                </view>
              </view>
            </view>
            <u-line class="u-line" color="#999"></u-line>
          </view>
        </view>

        <view v-else style="padding: 20rpx 0">
          <u-empty text="数据为空" mode="list"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from "echarts";
import statisticsService from "@/service/internal/statistics.service";

export default {
  data() {
    return {
      currOrgUuid: "",
      currOrgName: "",
      queryForm: {},
      list: [],
    };
  },
  onLoad(option) {
    this.currOrgUuid = option.currOrgUuid;
    let params = { ...option, showTb: true, showTq: true };
    delete params.currOrgUuid;
    this.queryForm = params;
    this.loadData(this.queryForm);
  },
  methods: {
    loadData(data) {
      this.queryShow = false;
      this.$u.loading("数据查询中...");
      statisticsService
        .caseCycle({
          paras: {
            ...data,
          },
        })
        .then((res) => {
          let currOrgData = res.data.find(
            (item) => item.orgUuid == this.currOrgUuid
          );
          this.currOrgName = currOrgData.orgName;

          let cycleList = [];
          res.bean.map((item) => {
            cycleList.push({
              cycleCode: item.cycleCode,
              cycleName: item.cycleName,
              caseCount: currOrgData[item.cycleCode + "CaseCount"] || 0,
              caseValueCount:
                currOrgData[item.cycleCode + "CaseValueCount"] / 10000 || 0,
              cigaCount: currOrgData[item.cycleCode + "CigaCount"] || 0,
              cigaCountTqCount:
                Number(currOrgData[item.cycleCode + "CigaCountTqCount"]) || 0,
              cigaCountTb:
                Number(currOrgData[item.cycleCode + "CigaCountTb"]) || 0,
            });
          });

          this.list = cycleList;

          this.initChart(cycleList);

          this.$u.hideLoading();
        })
        .catch(() => {
          this.$u.hideLoading();
        });
    },
    initChart(data) {
      let xData = [],
        caseCountArr = [],
        caseValueArr = [],
        cigarCountArr = [];

      data.forEach((item) => {
        xData.push(item.cycleName);
        caseCountArr.push(item.caseCount || 0);
        caseValueArr.push(item.caseValueCount);
        cigarCountArr.push(item.cigaCount || 0);
      });

      let chart = echarts.init(document.getElementById("chartBox"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "案件数",
            "案值(万元)",
            `卷烟数(${this.queryForm.productUnitName})`,
          ],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            name: "案件数/案值",
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: `卷烟数(${this.queryForm.productUnitName})`,
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "案件数",
            type: "line",
            data: caseCountArr,
          },
          {
            name: "案值(万元)",
            type: "line",
            data: caseValueArr,
          },
          {
            name: `卷烟数(${this.queryForm.productUnitName})`,
            type: "line",
            data: cigarCountArr,
            yAxisIndex: 1,
          },
        ],
      };

      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-title {
  font-size: 38rpx;
  font-weight: 600;
  line-height: 80rpx;
}

.list-wrap {
  margin-top: 10rpx;
  .title {
    font-size: 32rpx;
    color: #999;
    line-height: 80rpx;
    // border-bottom: 1rpx solid #999;
  }
}

.list {
  &-item {
    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      color: #999;
      .left {
        .name {
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
          color: #333;
        }
      }
      .right {
        .count {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
}
</style>
